<template> 
    <div class="container" >
       <div>
           <input class="form-control" :placeholder="$t('teacher.userName1')" v-model="formData.userName">
           <input class="form-control" :placeholder="$t('teacher.nickname1')" v-model="formData.nickName">
           <button class="btn"  @click="toggle"  title="切换语言"><el-icon><ArrowDown/></el-icon></button>
           <button class="btn"  @click="queryUserStudentData" title="查询"><el-icon><Search/></el-icon></button>
           <ImportUser :user-list="userList" @getSelectData="getSelectData" @reback="queryUserStudentData"></ImportUser>
           <RelevancyClass :user-list="userList" @getSelectData="getSelectData" @reback="queryUserStudentData"></RelevancyClass>
           <PlusUserVue :user-list="userList" @getSelectData="getSelectData" @reback="queryUserStudentData"></PlusUserVue>
          <DeleteUserStudentVue :user-list="userList" @getSelectData="getSelectData" @reback="queryUserStudentData"></DeleteUserStudentVue> 
       </div>
       <el-config-provider :locale="locale"> 
       <el-table ref="userTableRef" :data="tableData" :height="height" stripe style="width: 100% top: 20px;">
       <el-table-column type="selection" width="55"/>
       <el-table-column prop="id" :label="$t('teacher.id')" width="55"/>
       <el-table-column prop="userName" :label="$t('teacher.userName')"/>
       <el-table-column prop="nickName" :label="$t('teacher.nickname')"/>
       <el-table-column prop="phone" :label="$t('teacher.phone')" />
       <el-table-column prop="qqNumber" :label="$t('teacher.qq')"/>
       <el-table-column prop="email" :label="$t('teacher.email')"/>
        <el-table-column fixed="right" :label="$t('teacher.operate')" width="180">
        <template #default="scope"> 
           <a class="btn" :title="$t('teacher.Edit')" @click="editUser(scope.row)"><el-icon><Edit/></el-icon></a>
           <a class="btn" :title="$t('teacher.Delete')" @click="deleteUserStu(scope.row)"> <el-icon><Delete/></el-icon></a>
         </template>
       </el-table-column> 
     </el-table> 
       <nav class="tr">
           <el-pagination
           v-model:current-page="formData.page"
           v-model:page-size="formData.rp"
           :page-sizes="[100, 20, 50, 100]"
           layout="sizes, prev, pager, next,total"
           :total="total"
           @size-change="handleSizeChange"
           @current-change="handleCurrentChange"
   
           /> 
       </nav>
       <EditUserVue></EditUserVue>
   </el-config-provider>
    </div>
   </template>
   <script>
   import { Edit,Plus,Search,ArrowDown,Delete,Link,Sort } from '@element-plus/icons-vue'
   import DeleteUserStudentVue from '@/components/DeleteUserStudent.vue'
   import PlusUserVue from '@/components/PlusUser.vue'
   import EditUserVue from '@/components/EditUser.vue'
   import RelevancyClass from '@/components/RelevancyClass.vue'
   import ImportUser from '@/components/ImportUser.vue'
   import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
   import en from 'element-plus/dist/locale/en.mjs'
   import { reactive,toRefs,computed, ref } from 'vue'
    export default {
       name: 'APP',
       components:{
           Edit,Plus,Search,ArrowDown,DeleteUserStudentVue,Delete,PlusUserVue,EditUserVue,RelevancyClass,Link,Sort,ImportUser
       },
       data: function(){ 
       return {
           height:200,
            tableData:[],
            total:20,
            formData:{
               page:1,
               rp:10,
               userName:"",
               nickName:""
            },
            userList:[]
       }
       },
       methods:{
        queryUserStudentData(){
               var that = this;
               window.http.post('/api/user/queryUserStudentList',this.formData).then(res => {
                  var data = res.data;
                  that.tableData = data;
               }) 
               .catch(function(error){
                  that.$message.error('服务器异常');
               });
               window.http.post('/api/user/queryUserStudentTotal',this.formData).then(res => {
                  
                  var data = res.data;
                  if(data.success){
                   that.total = data.total;
                  }
               }) 
               .catch(function(error){
                  that.$message.error('服务器异常');
               })
           },
           handleSizeChange(){
               this.queryUserStudentData();
           },
           handleCurrentChange(){
               this.queryUserStudentData();
           },
           getSelectData(){
              var array= this.$refs.userTableRef.getSelectionRows();
              this.userList=array;
           },
           deleteUserStu(row){
            console.info(JSON.stringify(row));
            this.userList.splice(0,this.userList.length);
            this.userList.push(row);
            this.$bus.emit("deleteUserStuById");
           },
           editUser(row){
            this.$bus.emit("editUserStuDialog",row);
           },
           plusUser(){
            this.$router.push({
                    name:"PlusUser",
                    });  
           },
           relevancyClass(row){
            this.$bus.emit("relevancyClassStuById",row);
           },
           importUser(row){
            this.$bus.emit("importUserStuById",row);
           }
       },
       mounted(){
           var app =document.getElementById("app");
           this.height=app.clientHeight-190;
           this.queryUserStudentData();
           
       },
       updated(){
           console.log(" updated currentPage:" + this.currentPage + "\t pageSize:" + this.pageSize);
           
       },
       setup(){
           const language = ref('zh-cn')
           const locale = computed(() => (language.value === 'zh-cn' ? zhCn : en))
           const toggle = () => {
           language.value = language.value === 'zh-cn' ? 'en' : 'zh-cn'
           }
           return{
               language,
               locale,
               toggle,
           }
         }
       }
   </script>
   <style>
       html,
       body, 
       #app{
       height: 100%;
       }
   </style>
   <style scoped> 
       .container {
       display: flex;
       flex-direction: column;
       width: 100%;
       height: 100%;
       padding-top: 15px;
    }
    .tr{
    width: 100%;
    flex-basis: 50px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
   
    align-items: center;
    }
    .second{
    background-color: aqua;
    }
    .form-control{
       display: inline-block;
       width: 200px;
       margin-right: 10px;
    }
    .btn{
       margin-right: 5px;
   
    }
    
   </style> 